<template>
  <!-- 居民管理 -->
  <div class="main">
    <div class="select">
      <el-row>
        <el-col :span="6">
          <div>
            <el-form ref="form" :model="form" label-width="80px">
              <el-form-item label="姓名:">
                <el-input v-model="form.userName"></el-input> </el-form-item
            ></el-form>
          </div>
        </el-col>
        <el-col :span="6" :offset="3">
          <div>
            <el-form ref="form" :model="form" label-width="80px">
              <el-form-item label="证件号码:">
                <el-input v-model="form.identifyNo"></el-input> </el-form-item
            ></el-form>
          </div>
        </el-col>
        <el-col :span="6" :offset="3">
          <div>
            <el-form ref="form" :model="form" label-width="80px">
              <el-form-item label="手机号码:">
                <el-input v-model="form.phoneNumber"></el-input> </el-form-item
            ></el-form>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="小区名称:">
              <el-select
                filterable
                v-model="communityNamevalue"
                placeholder="请选择"
                class="type"
              >
                <el-option
                  v-for="item in communityNamelist"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select> </el-form-item
          ></el-form>
        </el-col>
        <el-col :span="6" :offset="3">
          <el-form ref="form" label-width="80px">
            <el-form-item label="是否注册:">
              <el-select v-model="registeredvalue" placeholder="请选择">
                <el-option
                  v-for="item in registeredlist"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select> </el-form-item
          ></el-form>
        </el-col>
      </el-row>
    </div>
    <div class="buttom">
      <el-button @click="reset">重置</el-button>
      <el-button @click="searchinfo" type="primary">查询</el-button>
    </div>
    <div class="content">
      <div class="content-title">
        <span
          >查询列表 <span class="title-span">未注册人数 :</span
          >{{ notRegistedNum }}</span
        >
        <span>
          <el-button @click="exportInhabitList">导出</el-button
          ><el-button @click="downloadinhbatModel">模板下载</el-button
          ><el-button @click="dialogVisible = true"
            >导入<i class="el-icon-upload el-icon--right"></i
          ></el-button>
        </span>
      </div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="userName" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="identifyType" label="证件类型" width="180">
          <template slot-scope="scope">
            <span>{{ scope.row.identifyType | identifyTypeText }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="identifyNo" label="证件号码"> </el-table-column>
        <el-table-column prop="address" label="居住地址"> </el-table-column>
        <el-table-column prop="phoneNumber" label="手机号码"> </el-table-column>
        <el-table-column prop="registered" label="是否注册">
          <template slot-scope="scope">
            <span>{{ scope.row.registered | registeredTypeText }}</span>
          </template>
        </el-table-column>
        <el-table-column width="220" prop="edits" label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handlelook(scope.$index, scope.row)"
              >查看</el-button
            >
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >修改</el-button
            >
            <el-button size="mini" type="danger" @click="deleteRow(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="导入管理" :visible.sync="dialogVisible" width="30%">
        <el-upload
          ref="upload"
          :show-file-list="true"
          :multiple="false"
          :limit="1"
          drag
          :on-change="handleChange"
          accept=".xls,xlsx"
          class="upload"
          :auto-upload="false"
          :file-list="file"
          action=""
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传xls/xlsx文件</div>
        </el-upload>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitFileForm">确 定</el-button>
        </span>
      </el-dialog>
      <div class="block">
        <Pagination
          :total="page_total"
          @pageChange="pageChange"
          :page="page"
        ></Pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { exportExcel } from "../../utils/util";
export default {
  name: "addresident",
  data() {
    return {
      registeredlist: [
        { value: 1, label: "是" },
        { value: 2, label: "否" },
      ],
      registeredvalue: null,
      communityNamelist: [],
      communityNamevalue: "",
      page: {
        page_index: 1,
        page_limit: 10,
      },
      notRegistedNum: null,
      page_total: 1, //总条数
      form: {
        address: "",
        userName: "",
        identifyNo: "",
        neighborhoodId: "",
        phoneNumber: "",
      },
      dialogVisible: false,
      info: {},
      tableData: [],
      file: [],
    };
  },
  created() {
    let params1 = {
      // parentId: "1",
      level: "1",
    };
    this.getSubBuildList(params1);
    this.initpage();
  },
  mounted() {},
  filters: {
    identifyTypeText(type) {
      let tyepText = "";
      switch (type) {
        case 1:
          tyepText = "身份证";
          break;
        case 2:
          tyepText = "护照";
          break;
        case 3:
          tyepText = "港澳通行证";
          break;
        case 4:
          tyepText = "台胞证";
          break;
        case 5:
          tyepText = "士官证";
          break;
        case 6:
          tyepText = "学生证";
          break;
        case 7:
          tyepText = "其他证件";
          break;
        default:
          tyepText = "";
          break;
      }
      return tyepText;
    },
    registeredTypeText(type) {
      let tyepText = "";
      switch (type) {
        case 1:
          tyepText = "是";
          break;
        case 2:
          tyepText = "否";
          break;
        default:
          tyepText = "";
          break;
      }
      return tyepText;
    },
  },
  methods: {
    async getSubBuildList(params, target) {
      let { data } = await this.$ajax.lu.getSubBuildList(params);
      console.log(data);
      this.communityNamelist = data;
      console.log(this.communityNamelist, 99999999);
    },
    reset() {
      this.registeredvalue = ''
      this.form = [];
      this.communityNamevalue = "";
    },
    exportInhabitList() {
      // this.initpage();
      this.$ajax.lu.exportInhabitList().then((data) => {
        console.log(data, 88888);
        exportExcel(data, "居民楼栋信息.xls");
      });
    },
    downloadinhbatModel() {
      // this.initpage();
      this.$ajax.lu.downloadinhbatModel().then((data) => {
        exportExcel(data, "居民楼栋信息模板.xls");
      });
    },
    handleChange(file) {
      this.file = file.raw;
    },
    //自定义文件上传
    async submitFileForm() {
      var formData = new FormData();
      formData.append("file", this.file);
      console.log(this.file);
      let { code } = await this.$ajax.lu.uploadInfoList(formData);
      console.log(code);
      this.dialogVisible = false;
      this.file = [];
      this.initpage();
    },
    searchinfo() {
      this.initpage();
    },
    async initpage() {
      let params = {
        pageNo: Number(this.page.page_index),
        id: this.communityNamevalue,
        pageSize: Number(this.page.page_limit),
        neighborhoodId: 1,
        userName: this.form.userName,
        identifyNo: this.form.identifyNo,
        registered: this.registeredvalue,
        phoneNumber: this.form.phoneNumber,
      };
      console.log(params);
      let { data } = await this.$ajax.lu.getInhabitList(params);
      console.log(data);
      this.page_total = data.total;
      this.tableData = data.list;
      this.notRegistedNum = data.notRegistedNum;
    },
    pageChange(item) {
      this.page.page_index = item.page_index;
      this.page.page_limit = item.page_limit;
      this.initpage(); //改变页码，重新渲染页面
    },
    handlelook(index, row) {
      this.$router.push({
        name: "editresident",
        query: { type: "look", info: JSON.stringify(row) },
      });
    },
    handleEdit(index, row) {
      console.log(index, row);
      this.$router.push({
        name: "editresident",
        query: { type: "edit", info: JSON.stringify(row) },
      });
    },
    deleteRow(row) {
      var params = new FormData();
      params.append("id", row.id);
      this.$ajax.lu.delInhabitInfo(params).then((res) => {
        this.initpage();
      });
    },
  },
};
</script>
<style scoped>
.main {
  padding: 10px;
}
.nameinfo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* align-item center */
}
.title-span {
  color: red;
  padding-left: 20px;
}
.buttom {
  padding-top: 35px;
  padding-right: 62px;
  text-align: right;
}
.select {
  padding: 30px 64px 0px;
}
.nameinfo2 {
  display: flex;
  align-items: center;
}
.content {
  padding: 95px 54px 30px;
}
.content-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 40px;
}
.block {
  padding-top: 35px;
  text-align: right;
}
</style>
